<template>
	<div class="cartcontrol">
		<!--减少-->
		<transition name="move">
			<div class="cart-remove" v-show="food.count>0" @click.stop.prevent="removeCart($event)">
				<transition name="rotate">
					<div class="inner icon-remove_circle_outline"></div>
				</transition>
			</div>
		</transition>
		<!--数量-->
		<div class="cart-count" v-show="food.count>0">{{food.count}}</div>
		<!--增加-->
		<div class="cart-add icon-add_circle" @click.stop.prevent="addCart($event)"></div>
	</div>
</template>

<script type="text/ecmascript-6">
 
    export default {
        props: {
            food: {
                type: Object
            }
        },
        methods: {
            //加1
            addCart(event) {
                //取消pc端点击时,出发两次点击事件
                if (!event._constructed) {
                    return;
                };
                //如果食物数量为0 ,+1
                if (!this.food.count) {
                    this.$set(this.food, 'count', 1);
                }else {
                    this.food.count++;
                }
                //将cartcontrl触发的cart.add事件派生出去, event.target是作为这个事件的参数来传递
	            //这是作为cartontrol派生给goods组件的一个方法
                //this.$root.eventHub.$emit('cart.add',event.target);
	            this.$emit('ball',event.target)
	           
            },
	        //减1
	        removeCart(event) {
                //取消pc端点击时,出发两次点击事件
                if (!event._constructed) {
                    return;
                };
                //如果食物数量为0 ,-1
                if (this.food.count) {
                    this.food.count--;
                }
	        }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
	.cartcontrol
		font-size:0
		.cart-remove
			display :inline-block
			padding: 6px
			.inner
				display :inline-block
				line-height: 24px
				font-size: 24px
				color: rgb(0,160,220)
		.cart-count
			display :inline-block
			vertical-align: top
			width: 12px
			padding-top: 6px
			line-height:24px;
			font-size: 10px
			color:rgb(147,153,159)
			text-align: center
		.cart-add
			display :inline-block
			padding: 6px
			line-height: 24px
			font-size: 24px
			color: rgb(0,160,220)
		/*remove平移动画*/
		.move-enter-active , .move-leave-active
			transition: all 0.3s linear
			.inner
				transform:rotate(0deg)
				transition: all 0.3s linear
		.move-enter, .move-leave-active
			opacity:0
			transform:translate3d(24px,0,0)
			.inner
				transform:rotate(180deg)
</style>